<template>
	<view class="yuyue__out">
		<!-- <view class="top_box" style="text-align: center;">
			   <text>酒店房间列表</text>
					</view>
 -->

<view class="yuye_room_list">
	<view class="item" v-for="(item, index) in list" :key="index">
		<view class="img">
			<u--image :showLoading="true"  src="https://cdn.uviewui.com/uview/album/1.jpg" 
			width="100%" height="250rpx" @click="click"></u--image>
		</view>
		<view class="room_num">
			房间号:{{item.roomnum}}
			
		</view>
		<view class="price">
			<text>￥{{item.room_price}}</text>
		</view>
		<view class="tag" >
			{{item.room_type}}
			
		</view>
		<view class="status" style="margin: 10rpx 0">
			<u-tag disabled v-if="item.roomstate==1?true:false"  size="mini" plain type="warning" style="width: 115rpx;" text="已预约"></u-tag>
			<u-tag disabled v-if="item.roomstate==0?true:false"  size="mini" plain type="success" style="width:85rpx;" text="空房"></u-tag>
			<u-tag disabled v-if="item.roomstate==2?true:false"  size="mini" plain type="error" style="width: 85rpx;" text="售出"></u-tag>
		</view>
		<view class="caozuo_item">
			<u-button @click="detail(item)" style="width: 140rpx;margin: 10rpx 0;"
			size="mini"   text="房间详情"></u-button>
			
			
			
			<u-button @click="yuyue(item)" v-if="item.roomstate==0?true:false" 
			style="width: 140rpx;margin: 10rpx 0;" size="mini" type="warning" text="预约房间"></u-button>
			
		</view>
		
	</view>
	
</view>

		
		
		
	<u-popup round="10"   closeable mode="center" :show="poup_show" @close="close" >
	            <view class="popup_box">
	               <view class="tit">
	               	请输入支付密码
	               </view>
				   <view class="tips">
				   	<text style="color: red;">*</text>
					<text>温馨提示:确认支付</text>
					<text style="color: red;">￥{{item_goods.room_price}}</text>
					<text></text>
				   </view>
				   <view class="code">
					   
					   
				  <u-code-input 
				  @finish="finish"
				  style="margin: 0 auto;display: flex;"
				  v-model="code" :space="0"  hairline></u-code-input>
				   </view>
	            </view>
			</u-popup>
	
		
	</view>
</template>

<script>
import { Request2 } from '@/until/api.js';
export default {
	data() {
		return {
			code:"",
			poup_show:false,
			item_goods:"",
			list: [],
			addForm: {
				roomnum: '',
				room_price: ''
			},
			
		};
	},
	onShow() {
		this.getlist();
	},
	methods: {
		detail(item){
			uni.navigateTo({
				url:'/pages/kefang/detail?data='+JSON.stringify(item)
			})
		},
		async finish(e) {
						console.log('输入结束，当前值为：' + e);
						
						var user_accout=uni.getStorageSync('account');
						var user_name=uni.getStorageSync('supername');
						var requsetdata={
							id:this.item_goods.id,
							paymentPassword:this.code,
							account:uni.getStorageSync('account'),
							room_id:this.item_goods.id,
							roomnum:this.item_goods.roomnum,
							income:this.item_goods.room_price,
							user_name:uni.getStorageSync('supername'),
							
						}
						var res = await Request2('/pay/ruzhu', 'post', requsetdata);
						if(res.data.code=="200"){
							this.code=""
							this.poup_show=false;
							this.$u.toast("预约成功!");
							this.getlist()
							
						}else{
							this.$u.toast(res.data.msg);
							
						}
						
						
					},
		// 预约
		async yuyue(item){
			console.log(item)
			this.item_goods=item;
			this.poup_show=true;
			// var user_accout=uni.getStorageSync('account');
			// var user_name=uni.getStorageSync('supername');
			// var requsetdata={
			// 	id:item.id,
			// 	user_accout:user_accout,
			// 	user_name:user_name,
			// 	room_price:item.room_price,
			// 	roomnum:item.roomnum,
			// 	roomstate:item.roomstate,
				
			// }
			// var res = await Request2('/fangjian/userSubscribeRoom', 'post', requsetdata);
			// // console.log(res,"res")
			// if(res.data.code=="200"){
				
			// 	this.$u.toast("预约成功!");
			// 	this.getlist()
			// 	// uni.redirectTo({
			// 	// 	url: '/pages/kefang/MYyuyuefangjian'
			// 	// });
			// }else{
			// 	this.$u.toast(res.data.msg);
				
			// }
		},
	
		
		open() {
			this.poup_show = true;
		},
		close() {
			this.code=""
			this.poup_show = false;
		},
		
		//获取列表
		async getlist() {
			var requsetdata = {
				pageNum: 1,
				pageSize: 999
			};
			var res = await Request2('/fangjian/list', 'post', requsetdata);
			this.list = res.data.data;
			// console.log(this.list, 'this.list');
		}
	}
};
</script>

<style lang="scss" scoped>
	.yuyue__out{
		background-color: #eeeeee;
		overflow: hidden;
		min-height: 100vh;
	}
	.popup_box{
		// background-color: #fff;
		width: 580upx;
		height: 500upx;
		text-align: center;
		overflow: hidden;
		
		box-sizing: border-box;
		padding: 0 40upx;
	    
		.tit{
			margin-top: 70upx;
			font-size: 38upx;
			letter-spacing: 5upx;
			font-weight: 550;
			
		}
		
		.tips{
			margin: 60upx 0;
			color: #c2c2c2;
			font-size: 30upx;
			letter-spacing: 2upx;
		}
		.code{
			width: 100%;
			width: 217px !important;
			margin: 0 auto  !important;
			// padding-left: 34upx;
			.u-code-input{
				// display: inline-block;
				
				width: 217px !important;
				margin: 0 auto !important;
				/deep/ .u-code-input__item{
					// flex: 1;
					width: 35px !important
					// 500 /6 
				}
			}
			
		}
	
		
	}
	
	.yuye_room_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;
		.item{
			
			background-color: #fff;
			width:330rpx;
			padding: 15rpx;
			box-sizing: border-box;
			margin: 20rpx 10rpx;
			.caozuo_item{
				justify-content: space-between;
				display: flex;
			}
			.room_num{
				color: #23a9f2;
				font-size: 39rpx;
				padding: 10rpx 0 ;
			}
			.price{
				color: #b72102;
				
				font-size: 38rpx;
			}
			.tag{
				background-color: #23a9f2;
				color: #fff;
				text-align: center;
				width: 140rpx;
				padding: 5rpx 5rpx;
				margin: 5rpx 0;
			}
		}
	}
	
.top_box {
	margin: 20rpx;
	.addbtn {
		width: 150rpx;
		height: 80rpx;
	}
}
.popup_box {
	// background-color: #fff;
	width: 600upx;
	height: 400upx;

	overflow: hidden;

	box-sizing: border-box;
	// padding: 0 0upx;
	.contnet_box {
		padding: 20upx 20upx;
		.item_input {
			display: flex;
			width: 100%;
			// text-align: center;

			margin: 15upx 0;
			.label {
				line-height: 60upx;
			}
		}
	}

	.tit {
		text-align: center;
		margin-top: 40upx;
		font-size: 38upx;
		font-weight: 500;
	}
	.tips {
		margin: 60upx 0;
		color: #c2c2c2;
		font-size: 34upx;
		letter-spacing: 2upx;
	}
	.code {
		padding: 0;
		padding-left: 15upx;
	}
}

</style>

